<!DOCTYPE html>
<html lang="en">
<head>

    <title>物联网卡管理</title>
    <#include "/include/header.ftl">

    <link rel="stylesheet" href="/static/css/ContentSytle.css">

    <!--树形菜单引用-->
    <link rel="stylesheet" type="text/css"
          href="/static/js/X-admin/lib/ztree-select-search/css/bootstrapStyle/bootstrapStyle.css"/>
    <link rel="stylesheet" type="text/css" href="/static/js/X-admin/lib/ztree-select-search/css/zTreeSelect.css"/>
    <script type="text/javascript" src="/static/js/X-admin/lib/ztree-select-search/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="/static/js/X-admin/lib/ztree-select-search/js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="/static/js/X-admin/lib/ztree-select-search/js/jquery.ztree.exedit.js"></script>
    <script type="text/javascript" src="/static/js/X-admin/lib/ztree-select-search/js/jquery.ztree.exhide.min.js"></script>
    <script type="text/javascript" src="/static/js/X-admin/lib/ztree-select-search/js/zTreeSelect.js"></script>
    <script type="text/javascript" src="/static/js/X-admin/lib/ztree-select-search/TreeSelect.js"></script>


</head>
<body class="tablebody">
<div class="Container">
    <!--三大运营商选择-->
    <div class="title-Tab radioSel">
        <h2>运营商：</h2>
        <a href="javascript:;" class="current">
            <h3>全部
                <small>26800</small>
            </h3>
        </a>
        <a href="javascript:;">
            <h3>移动
                <small>26800</small>
            </h3>
        </a>
        <a href="javascript:;">
            <h3>联通
                <small>18000</small>
            </h3>
        </a>
        <a href="javascript:;">
            <h3>电信
                <small>16000</small>
            </h3>
        </a>
    </div>
    <!--三大运营商选择 end-->

    <!--表格内容-->
    <div class="TableCont">
        <div class="TableColme">
            <form class="layui-form" action="">
                <!--搜索-->
                <div class="tableSearch">
                    <input type="search" id="TableSearch" class="layui-input" placeholder="卡号，ICCID，流量池ID，订单号"/>
                    <button type="button" id="SearchBtn">搜索</button>
                </div>
                <!--搜索 end-->
                <!--筛选-->
                <div class="tableFilter" id="tableFilter">
                    <a href="javascript:;" class="tit">筛选器</a>
                    <div class="FilterCont" id="FilterCont">
                        <ul>
                            <li>
                                <div class="title">运营商</div>
                                <div class="inputCont select">
                                    <select>
                                        <option value="">全部</option>
                                        <option value="移动">移动</option>
                                        <option value="联通">联通</option>
                                        <option value="电信">电信</option>
                                    </select>
                                </div>
                            </li>
                            <li>
                                <div class="title">渠道</div>
                                <div class="inputCont" id="zTreeSelect">
                                    <div class="zTreeSelect" style="width:100%;" zTreeSelect-search-field="name">
                                        <input type="hidden" id="qudaoInput" class="zTreeSelect-hidden" value="" autocomplete="off"/>
                                        <input type="text" class="zTreeSelect-text" id="qudaoSelect" zTreeSelect-text-field="name" autocomplete="off" placeholder="全部">
                                        <span class="zTreeSelect-arrow arrow-down">&nbsp</span>
                                    </div>
                                </div>
                            </li>

                            <li>
                                <div class="title">套餐名称</div>
                                <div class="inputCont">
                                    <input type="text" class="layui-input" placeholder="请输入套餐名称">
                                </div>
                            </li>

                            <li>
                                <div class="title">卡片状态</div>
                                <div class="inputCont select">
                                    <select>
                                        <option value="全部">全部</option>
                                        <option value="测试期">测试期</option>
                                        <option value="沉默期">沉默期</option>
                                        <option value="未激活">未激活</option>
                                        <option value="已激活">已激活</option>
                                        <option value="停机">停机</option>
                                        <option value="报警">报警</option>
                                        <option value="已失效">已失效</option>
                                        <option value="已销户">已销户</option>
                                    </select>
                                </div>
                            </li>
                            <li>
                                <div class="title">用户标签</div>
                                <div class="inputCont select">
                                    <div class="selectCheckbox selectCheckboxBig" style="width:205px;">
                                        <div class="layui-select-title"><input type="text" placeholder="请选择" value="全部"
                                                                               readonly="" id="select-checkbox-input"
                                                                               class="layui-input layui-unselect"><i
                                                    class="layui-edge"></i></div>
                                        <div class="select-checkbox-cont" id="select-checkbox-cont">
                                            <p><label><input type='radio' name='Product' title="产品A" value="产品A"
                                                             lay-filter="Product"></label></p>
                                            <p class="p-checkbox"><label><input type="radio" name="Product" title="新用户"
                                                                                value="新用户"
                                                                                lay-filter="Product"/></label></p>
                                            <p class="p-checkbox"><label><input type="radio" name="Product"
                                                                                title="重点关注用户" value="重点关注用户"
                                                                                lay-filter="Product"/></label></p>
                                            <p class="p-checkbox"><label><input type="radio" name="Product" title="优质用户"
                                                                                value="优质用户"
                                                                                lay-filter="Product"/></label></p>

                                            <p><label><input type='radio' name='Product' title="产品B" value="产品B"
                                                             lay-filter="Product"></label></p>
                                            <p class="p-checkbox"><label><input type="radio" name="Product" title="新用户"
                                                                                value="新用户"
                                                                                lay-filter="Product"/></label></p>
                                            <p class="p-checkbox"><label><input type="radio" name="Product"
                                                                                title="重点关注用户" value="重点关注用户"
                                                                                lay-filter="Product"/></label></p>
                                            <p class="p-checkbox"><label><input type="radio" name="Product" title="优质用户"
                                                                                value="优质用户"
                                                                                lay-filter="Product"/></label></p>

                                            <p><label><input type='radio' name='Product' title="产品C" value="产品C"
                                                             lay-filter="Product"></label></p>
                                            <p class="p-checkbox"><label><input type="radio" name="Product" title="新用户"
                                                                                value="新用户"
                                                                                lay-filter="Product"/></label></p>
                                            <p class="p-checkbox"><label><input type="radio" name="Product"
                                                                                title="重点关注用户" value="重点关注用户"
                                                                                lay-filter="Product"/></label></p>
                                            <p class="p-checkbox"><label><input type="radio" name="Product" title="优质用户"
                                                                                value="优质用户"
                                                                                lay-filter="Product"/></label></p>

                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="title">销售时间</div>
                                <div class="inputCont"><input type="text" class="layui-input Time" id="Time-xs"
                                                              placeholder="请选择时间段" autocomplete="off"
                                                              lay-verify="title"></div>
                            </li>
                            <li>
                                <div class="title">激活时间</div>
                                <div class="inputCont"><input type="text" class="layui-input Time" id="Time-jh"
                                                              placeholder="请选择时间段" autocomplete="off"></div>
                            </li>
                            <li>
                                <div class="title">测试到期时间</div>
                                <div class="inputCont"><input type="text" class="layui-input Time" id="Time-cs"
                                                              placeholder="请选择时间" autocomplete="off"></div>
                            </li>
                            <li>
                                <div class="title">沉默到期时间</div>
                                <div class="inputCont"><input type="text" class="layui-input Time" id="Time-cm"
                                                              placeholder="请选择时间" autocomplete="off"></div>
                            </li>
                            <li>
                                <div class="title">服务到期时间</div>
                                <div class="inputCont"><input type="text" class="layui-input Time" id="Time-fw"
                                                              placeholder="请选择时间" autocomplete="off"></div>
                            </li>
                            <li>
                                <div class="title">是否测试号码</div>
                                <div class="inputCont select">
                                    <select>
                                        <option value="全部">全部</option>
                                        <option value="是">是</option>
                                        <option value="否">否</option>
                                    </select>
                                </div>
                            </li>
                            <li>
                                <div class="title">剩余可用</div>
                                <div class="inputCont select">
                                    <select>
                                        <option value="全部">全部</option>
                                        <option value="小于等于0">小于等于0</option>
                                        <option value="大于0">大于0</option>
                                    </select>
                                </div>
                            </li>
                        </ul>
                        <div class="FilterBtnCont">
                            <button type="reset" class="btn-min btnNone" id="FilterClearBtn">清除</button>
                            <button type="reset" class="btn-min" id="FilterCancelBtn">取消</button>
                            <button type="button" class="btn-min btn-Orange" id="FilterBtn">筛选</button>
                        </div>

                    </div>
                </div>
                <!--筛选 end-->
            </form>
            <!--操作-->
            <div class="tableOperating" id="tableOperating">
                <h3>操作</h3>
                <div class="OperatingList" id="OperatingList">
                    <ul>
                        <li class="select">
                            <h3><a href="javascript:;">划卡</a></h3>
                            <dl>
                                <dd><a href="javascript:;" id="huaka">划卡</a></dd>
                                <dd><a href="javascript:;" id="pilianghuaka">批量划卡</a></dd>
                                <dd><a href="javascript:;" id="daoruhuaka">导入划卡</a></dd>
                            </dl>
                        </li>
                        <li class="select">
                            <h3><a href="javascript:;">生命周期变更</a></h3>
                            <dl>
                                <dd><a href="javascript:;" id="daizhuanjihuo"><i class="icon1"></i>转待激活</a></dd>
                                <dd><a href="javascript:;" id="qiangzhijihuo"><i class="icon2"></i>强制激活</a></dd>
                                <dd><a href="javascript:;" id="tingji"><i class="icon3"></i>停机</a></dd>
                                <dd><a href="javascript:;" id="fuji"><i class="icon4"></i>复机</a></dd>
                            </dl>
                        </li>
                        <li class="select">
                            <h3><a href="javascript:;">数据服务</a></h3>
                            <dl>
                                <dd><a href="javascript:;" id="guanbi"><i class="icon5"></i>关闭</a></dd>
                                <dd><a href="javascript:;" id="huifu"><i class="icon4"></i>恢复</a></dd>
                            </dl>
                        </li>
                        <li>
                            <h3><a href="javascript:;" id="daochu">导出</a></h3>
                        </li>
                    </ul>
                </div>
            </div>
            <!--操作 end-->

            <!--表格字段显示选择-->
            <div class="TableRow">
                <a href="javascript:;">显示字段</a>

            </div>
            <!--表格字段显示选择 end-->


            <!--表格独立分页 -->
            <div class="tablePage" id="TablePage"></div>
            <!--表格独立分页-->


        </div>
        <!--表格数据-->
        <table class="layui-table layui-hide" lay-even="" lay-skin="row" id="TableData" lay-filter="TableData"></table>
        <!--表格数据 end-->

    </div>
    <!--表格内容 end-->
</div>
<#include "/include/footer.ftl">


<!--表格操作-->
<script type="text/html" id="barCaozuo">
    <div class="OperatingRow">
        <a class="title" href="javascript:;">操作</a>
        <ul>
            <li><a lay-event="chongzhi" class="disabledlink">充值</a></li>
            <li><a lay-event="jiebang">公众号解绑</a></li>
            <li><a lay-event="gengxin">更新卡信息</a></li>
            <li><a lay-event="chakanshiyongliang">查看使用量</a></li>
            <li><a lay-event="smzqbgjl">生命周期变更记录</a></li>
        </ul>
    </div>
</script>
<!--表格操作 end-->


<script type="text/javascript">
    layui.use(['laydate', 'table', 'laypage', 'form'], function () {
        var table = layui.table;
        laydate = layui.laydate;
        form = layui.form;
        laypage = layui.laypage;
        var heightTable = $('.page-content', window.parent.document).outerHeight(true) - 195;


        var userName = '${name}';

        //表格数据
        table.render({
            elem: '#TableData'
            , height: heightTable
            , limit: 30
            , even: true
            , toolbar: 'filter'
            , defaultToolbar: ['filter']
            , cols: [[
                //表头
                {type: 'checkbox', width: 40}
                , {field: 'caozuo', title: '操作', width: 50, toolbar: '#barCaozuo', align: 'center'}
                , {field: 'kahao', title: '卡号', width: 200}
                , {field: 'ICCID', title: 'ICCID', width: 200}
                , {field: 'zhuangtai', title: '状态', width: 200}
                , {field: 'yunyingshang', title: '运营商', width: 200}
                , {field: 'qudao', title: '渠道', width: 200}
                , {field: 'biaoqian', title: '用户标签', width: 200, hide: true}
                , {field: 'xiaoshoushijian', title: '销售时间', sort: true, width: 200}
                , {field: 'jihuoshijian', title: '激活时间', width: 200}
                , {field: 'fuwudaoqishijian', title: '服务到期时间', sort: true, width: 200}
                , {field: 'taocanmingcheng', title: '套餐名称', width: 200}
                , {field: 'zongliang', title: '总量', width: 100}
                , {field: 'yiyong', title: '已用', sort: true, width: 100}
                , {field: 'shengyu', title: '剩余', sort: true, width: 100}

            ]]
            , data: [
                //表格数据
                {
                    // "LAY_CHECKED": true,
                    "kahao": '861064684295101',
                    "ICCID": '<a lay-event="cardView"  class="current">89860617080036919254-1</a>',
                    "zhuangtai": '已激活',
                    "yunyingshang": '联通',
                    "qudao": '唐远',
                    "biaoqian": '新用户',
                    "xiaoshoushijian": '2018-01-24 16:25:16',
                    "jihuoshijian": '2018-01-24 16:25:16',
                    "fuwudaoqishijian": '2018-01-24 16:25:16',
                    "taocanmingcheng": '70',
                    "zongliang": '0',
                    "yiyong": '10',
                    "shengyu": '70'
                },
                {
                    "kahao": '861064684295101',
                    "ICCID": '<a lay-event="cardView"  class="current">89860617080036919254-1</a>',
                    "zhuangtai": '已激活',
                    "yunyingshang": '联通',
                    "qudao": '唐远',
                    "biaoqian": '重点关注用户',
                    "xiaoshoushijian": '2018-01-24 16:25:16',
                    "jihuoshijian": '2018-01-24 16:25:16',
                    "fuwudaoqishijian": '2018-01-24 16:25:16',
                    "taocanmingcheng": '70',
                    "zongliang": '0',
                    "yiyong": '10',
                    "shengyu": '70'
                },
                {
                    "kahao": '861064684295101',
                    "ICCID": '<a lay-event="cardView"  class="current">89860617080036919254-1</a>',
                    "zhuangtai": '已激活',
                    "yunyingshang": '联通',
                    "qudao": '唐远',
                    "biaoqian": '重点关注用户',
                    "xiaoshoushijian": '2018-01-24 16:25:16',
                    "jihuoshijian": '2018-01-24 16:25:16',
                    "fuwudaoqishijian": '2018-01-24 16:25:16',
                    "taocanmingcheng": '70',
                    "zongliang": '0',
                    "yiyong": '10',
                    "shengyu": '70'
                }

            ]
        });

        //表单独立分页
        laypage.render({
            elem: 'TablePage' //注意，这里的TablePage 是 ID，不用加 # 号
            , count: 1250 //数据总数，从服务端得到
            , limit: 30//每页显示条数
            , layout: ['count', 'prev', 'skip', 'next', 'refresh']
            , prev: '<em>◀</em>'
            , next: '<em>▶</em>'
        });

        table.on('tool(TableData)', function (obj) {
            var data = obj.data;
            if (obj.event === 'chongzhi') {
                //充值操作
                top.layer.open({
                    type: 1,
                    fix: false, //不固定
                    maxmin: true,
                    move: false,
                    area: '500px',
                    btnAlign: 'r',
                    skin: 'layerOpen',
                    shade: 0.2,
                    title: '充值',//弹窗标题
                    content: '<form class="layui-form" action=""><div class="layerOpenCont">' +
                        '<div class="layerForm">' +
                        '<ul>' +
                        '<li>' +
                        '<div class="title">套餐</div>' +
                        '<div class="inputCont select">' +
                        '<select lay-verify="taocan">' +
                        '<option value="">请选择套餐</option>' +
                        '<option value="1">套餐1</option>' +
                        '<option value="2">套餐2</option>' +
                        '<option value="3">套餐3</option>' +
                        '<option value="4">套餐4</option>' +
                        '</select>' +
                        '</div>' +
                        '</li>' +
                        '<li><div class="title">充值金额</div><div class="inputCont"><input class="layui-input" lay-verify="jiner" placeholder="请输入金额"/></div></li>' +
                        '</ul>' +
                        '<p><i>●</i>确保账户有足够金额扣减；</p>' +
                        '<p><i>●</i>充值扣减金额为套餐标准价格*销售折扣；</p>' +
                        '<p><i>●</i>自定义卡充值的为自定义套餐包；</p>' +
                        '</div>' +
                        '</div>' +
                        '<div class="layui-layer-btn layui-layer-btn-r">' +
                        '<button class="btn-min layui-layer-btn0" type="button" onclick="top.closeBtn()">取消</button>' +
                        '<button class="btn-min layui-layer-btn1" lay-submit="" lay-filter="submitBtn">确定</button>' +
                        '</div>' +
                        '</form>',
                    success: function (layero, index) {
                        top.form.render();
                        //验证表单
                        top.form.verify({
                            jiner: function (value) {
                                if (value == '') {
                                    return '请输入金额';
                                }


                            },
                            taocan: function (value) {
                                if (value == '') {
                                    return '请选择套餐';
                                }
                            }

                        });
                        //提交表单
                        top.form.on('submit(submitBtn)', function (data) {
                            top.success('充值成功');//成功提示
                            return false;
                        });
                    }
                });
            }
            if (obj.event === 'jiebang') {
                //公众号解绑
                top.layer.open({
                    type: 1,
                    fix: false, //不固定
                    maxmin: true,
                    move: false,
                    area: '450px',
                    btnAlign: 'r',
                    skin: 'layerTips',
                    shade: 0.2,
                    title: false,
                    closeBtn: 0,
                    content: "" +
                        "<div class='layerOpenCont'>" +
                        "<div class='Layer-txt'>" +
                        "<h3>您确定要解绑吗？</h3>" +
                        "<p>解绑之后可重新绑定</p>" +
                        "</div>" +
                        "</div>",
                    btn: ['取消', '确定'],
                    btn2: function () {
                        //确认回调代码
                        top.success('解绑成功');//成功提示
                        return false
                    }
                })
            }
            if (obj.event === 'gengxin') {
                //更新卡信息
                top.layer.msg("<img src='/static/images/load.gif'/><span>正在手动更新，请稍候</span>", {
                    skin: 'layerLoad',
                    time: 5000,//弹窗5秒后自动关闭,取消自动关闭设置为0
                    shade: [0.1, '#fff'],//遮罩层禁止其他操作。
                    end: function () {
                        top.warning('网络异常，请稍后重试')
                    }
                });
            }
            if (obj.event === 'chakanshiyongliang') {
                top.layer.open({
                    type: 2,
                    fix: false, //不固定
                    maxmin: true,
                    move: false,
                    area: ['900px', '470px'],
                    btnAlign: 'r',
                    skin: 'layerOpen',
                    shade: 0.2,
                    title: '查看使用量',//弹窗标题
                    content: 'wlwk-gl-cksyl.html'
                })
            }
            if (obj.event === 'cardView') {
                var source = layui.table.cache['TableData']; //获取所有表格数据
                var index = obj.tr[0].rowIndex; //当前选中行索引
                //上一页
                function prev() {
                    index--;
                    if (index < 0) {
                        index = 0;
                    }
                    var iccid = source[index].ICCID;
                    top.$('#iccic').html(iccid)
                }

                //下一页
                function next() {
                    index++;
                    if (index > source.length - 1) {
                        index = source.length - 1;
                    }
                    var iccid = source[index].ICCID;
                    top.$('#iccic').html(iccid)
                }

                top.layer.open({
                    type: 1,
                    fix: false, //不固定
                    maxmin: true,
                    move: false,
                    area: '760px',
                    btnAlign: 'r',
                    skin: 'layerOpen',
                    shade: 0.2,
                    title: '查看卡信息',//弹窗标题
                    content: '<div class="layerTable" >' +
                        '<button  id="prev" class="prevBtn"><img src="/static/images/arr-left-big.png"/></button>' +
                        '<button  id="next" class="nextBtn"><img src="/static/images/arr-right-big.png"/></button>' +
                        '<div class="layerOpenCont scrollBox" style="max-height:446px"><div class="layerTableCont"><table class="layui-table" lay-even="" lay-skin="row" >' +
                        '<tbody>' +
                        '<tr><td width="50%">卡号：</td><td width="50%">ICCID：<span id="iccic">' + data.ICCID + '</span></td></tr>' +
                        '<tr><td>IMSI：</td><td>IMEI：</td></tr>' +
                        '<tr><td>供应商：</td><td>卡状态：已激活</td></tr>' +
                        '<tr><td>代理商：</td><td>二级渠道：</td></tr>' +
                        '<tr><td>离线状态：</td><td>采购单号：CG201811070000</td></tr>' +
                        '<tr><td>销售单号：</td><td>销售时间：2018/11/7 上午12:00:00</td></tr>' +
                        '<tr><td>测试结束时间：</td><td>沉默结束时间：2019/5/7 上午12:00:00</td></tr>' +
                        '<tr><td>激活时间：</td><td>服务到期时间：</td></tr>' +
                        '<tr><td>最后同步时间：</td><td>状态最后同步时间：</td></tr>' +
                        '<tr><td>主池id：</td><td>套餐信息：</td></tr>' +
                        '<tr><td>总量：1</td><td>已使用：0</td></tr>' +
                        '<tr><td>剩余：1</td><td>当月流量消耗：0</td></tr>' +
                        '<tr><td>绑卡号码：</td><td>绑卡微信ID：</td></tr>' +
                        '<tr><td>制卡费：</td><td>功能费：0*/</td></tr>' +
                        '</tbody>' +
                        '</table></div></div></div> ',
                    success: function (layero, index) {
                        top.form.render();//弹窗后初始化表单样式
                        top.$('#prev').click(function () {
                            prev()
                        });
                        top.$('#next').click(function () {
                            next()

                        });
                    }
                })
            }

            if (obj.event === 'smzqbgjl') {
                top.layer.open({
                    type: 1,
                    fix: false, //不固定
                    maxmin: true,
                    move: false,
                    area: ['760px', '500px'],
                    btnAlign: 'r',
                    skin: 'layerOpen',
                    shade: 0.2,
                    title: '声明周期变更记录',//弹窗标题
                    content: '<div class="layerTable" >' +
                        '<div class="layerOpenCont layerTableCont2" style="padding:0">' +
                        '<div class="layui-tab wlwk-bgzq">' +
                        '<ul class="layui-tab-title"><li class="layui-this">时间轴</li><li>报表</li></ul>' +
                        '<div class="layui-tab-content">' +

                        '<div class="layui-tab-item layui-show">' +
                        '<div class="czList">' +
                        '<h3>2019年5月</h3>' +
                        '<ul>' +
                        '<li><div class="time">5月25日</div><div class="czCont"><div class="line-icon"><hr sty/><i class="icon-1"></i></div><div class="cont"><p class="txt">停机</p><p>2019-04-14 15:20:45</p></div></div></li>' +
                        '<li><div class="time">5月25日</div><div class="czCont"><div class="line-icon"><hr/><i class="icon-2"></i></div><div class="cont"><p class="txt">复机</p><p>2019-04-14 15:20:45</p></div></div></li>' +
                        '<li><div class="time">5月25日</div><div class="czCont"><div class="line-icon"><hr/><i class="icon-3"></i></div><div class="cont"><p class="txt">激活</p><p>2019-04-14 15:20:45</p></div></div></li>' +
                        '<li><div class="time">5月25日</div><div class="czCont"><div class="line-icon"><hr/><i class="icon-4"></i></div><div class="cont"><p class="txt">库存</p><p>2019-04-14 15:20:45</p></div></div></li>' +
                        '<li><div class="time">5月25日</div><div class="czCont"><div class="line-icon"><hr/><i class="icon-5"></i></div><div class="cont"><p class="txt">销户</p><p>2019-04-14 15:20:45</p></div></div></li>' +
                        '</ul>' +

                        '<h3>2019年4月</h3>' +
                        '<ul>' +
                        '<li><div class="time">4月25日</div><div class="czCont"><div class="line-icon"><hr/><i class="icon-1"></i></div><div class="cont"><p class="txt">停机</p><p>2019-04-14 15:20:45</p></div></div></li>' +
                        '<li><div class="time">4月25日</div><div class="czCont"><div class="line-icon"><hr/><i class="icon-2"></i></div><div class="cont"><p class="txt">复机</p><p>2019-04-14 15:20:45</p></div></div></li>' +
                        '<li><div class="time">4月25日</div><div class="czCont"><div class="line-icon"><hr/><i class="icon-3"></i></div><div class="cont"><p class="txt">激活</p><p>2019-04-14 15:20:45</p></div></div></li>' +
                        '<li><div class="time">4月25日</div><div class="czCont"><div class="line-icon"><hr/><i class="icon-4"></i></div><div class="cont"><p class="txt">库存</p><p>2019-04-14 15:20:45</p></div></div></li>' +
                        '<li><div class="time">4月25日</div><div class="czCont"><div class="line-icon"><hr/><i class="icon-5"></i></div><div class="cont"><p class="txt">销户</p><p>2019-04-14 15:20:45</p></div></div></li>' +
                        '</ul>' +

                        '<h3>2019年3月</h3>' +
                        '<ul>' +
                        '<li><div class="time">3月25日</div><div class="czCont"><div class="line-icon"><hr/><i class="icon-1"></i></div><div class="cont"><p class="txt">停机</p><p>2019-04-14 15:20:45</p></div></div></li>' +
                        '<li><div class="time">3月25日</div><div class="czCont"><div class="line-icon"><hr/><i class="icon-2"></i></div><div class="cont"><p class="txt">复机</p><p>2019-04-14 15:20:45</p></div></div></li>' +
                        '<li><div class="time">3月25日</div><div class="czCont"><div class="line-icon"><hr/><i class="icon-3"></i></div><div class="cont"><p class="txt">激活</p><p>2019-04-14 15:20:45</p></div></div></li>' +
                        '<li><div class="time">3月25日</div><div class="czCont"><div class="line-icon"><hr/><i class="icon-4"></i></div><div class="cont"><p class="txt">库存</p><p>2019-04-14 15:20:45</p></div></div></li>' +
                        '<li><div class="time">3月25日</div><div class="czCont"><div class="line-icon"><hr/><i class="icon-5"></i></div><div class="cont"><p class="txt">销户</p><p>2019-04-14 15:20:45</p></div></div></li>' +
                        '</ul>' +
                        '</div>' +
                        '</div>' +

                        '<div class="layui-tab-item">' +
                        '<div class="TableCont" style="position:relative;">' +
                        '<table class="layui-table layui-hide"  lay-even="" lay-skin="row" id="TableInfo" lay-filter="TableInfo"></table>' +
                        '</div>' +
                        '</div>' +

                        '</div>' +
                        '</div>' +
                        '</div></div> ',
                    success: function (layero, index) {
                        top.form.render();//弹窗后初始化表单样式

                        var tableIns = top.table.render({
                            elem: '#TableInfo'
                            , limit: 30
                            , even: true
                            , width: 719
                            , height: 365
                            , page: {
                                limit: 30//每页显示条数
                                , layout: ['count', 'prev', 'skip', 'next', 'refresh']
                                , prev: '<em>◀</em>'
                                , next: '<em>▶</em>'
                                , theme: 'Pageright'
                            },
                            cols: [[
                                //表头
                                {field: 'zhuangtai', title: '状态', width: 380}
                                , {field: 'shijian', title: '操作时间', width: 336}
                            ]]
                            , data: [
                                {
                                    "zhuangtai": '销户',
                                    "shijian": '2019-04-01 18:37:25'
                                },
                                {
                                    "zhuangtai": '停机',
                                    "shijian": '2019-04-01 18:37:25'
                                },
                                {
                                    "zhuangtai": '复机',
                                    "shijian": '2019-04-01 18:37:25'
                                },
                                {
                                    "zhuangtai": '激活',
                                    "shijian": '2019-04-01 18:37:25'
                                }

                            ]
                        });
                        top.table.reload('TableInfo', tableIns);


                        /* top.$(".czList  ul").each(function() {
                         var num=top.$(this).find("li").length;
                         if(num == 1){
                         top.$(this).find("li").addClass('aa')
                         }
                         });
                         */

                    }
                })
            }
        });

        //筛选器检索
        $('#FilterBtn').click(function () {
            $('.tableFilter').removeClass('open');
            layer.msg('暂无数据！');
        });

        //选择产品标签
        form.on('radio(Product)', function (data) {
            $('#select-checkbox-input').val(data.value);
        });


        //搜索框点搜索
        $('#SearchBtn').click(function () {
            layer.msg('暂无数据！')
        });

        //搜索框回车搜索
        $("#TableSearch").keyup(function (e) {
            if (event.keyCode == 13) {
                layer.msg('暂无数据！')
            }
        });


        //初始化渠道菜单
        var setting = {
            view: {dblClickExpand: false, selectedMulti: false, showIcon: true, filter: true, fontCss: getFontCss},
            check: {chkStyle: "checkbox", enable: false},
            data: {simpleData: {enable: true}},
            callback: {onClick: zTreeOnClick, onCheck: zTreeOnClick}
        };
        $(function () {
            $("#qudaoSelect").zTreeSelect(setting, zNodes);
        });

        laydate.render({elem: '#Time-xs', format: 'yyyy.MM.dd', range: '-'});//销售时间
        laydate.render({elem: '#Time-jh', format: 'yyyy.MM.dd', range: '-'});//激活时间
        laydate.render({elem: '#Time-cs', format: 'yyyy.MM.dd'});//测试时间
        laydate.render({elem: '#Time-cm', format: 'yyyy.MM.dd'});//沉默时间
        laydate.render({elem: '#Time-fw', format: 'yyyy.MM.dd'});//服务到期时间

        //选择表格字段
        form.on('checkbox(allChecked)', function (data) {
            if (this.checked) {
                $("input[name='tableSel']:checkbox").each(function () {
                    $(this).prop("checked", 'checked');
                });
            } else {
                $("input[name='tableSel']:checkbox").each(function () {
                    $(this).prop("checked", false);
                });
            }
            form.render('checkbox');
        });

        //划卡
        $('#huaka').click(function () {
            var checkStatus = table.checkStatus('TableData'), data = checkStatus.data;
            if (data == 0) {
                layer.msg('请先选择数据，在进行操作！')
            } else {
                //划卡弹窗
                top.layer.open({
                    type: 1,
                    fix: false, //不固定
                    maxmin: true,
                    move: false,
                    area: '500px',
                    btnAlign: 'r',
                    skin: 'layerOpen',
                    shade: 0.2,
                    title: '划卡',//弹窗标题
                    content: '' +
                        '<form class="layui-form" action="">' +
                        '<div class="layerOpenCont"><div class="layerForm">' +
                        '<ul>' +
                        '<li>' +
                        '<div class="title">渠道</div>' +
                        '<div class="inputCont">' +
                        '<div class="zTreeSelect" style="width:100%;" zTreeSelect-search-field="name">' +
                        '<input type="hidden" id="qudaoInputLayer" class="zTreeSelect-hidden" value="" autocomplete="off"/>' +
                        '<input type="text" class="layui-input zTreeSelect-text" id="qudaoSelectLayer" zTreeSelect-text-field="name" autocomplete="off" placeholder="请选择" lay-verify="qudao">' +
                        '<span class="zTreeSelect-arrow arrow-down">&nbsp;</span>' +
                        '</div>' +
                        '</div>' +
                        '</li>' +
                        '</ul>' +
                        '<p><i>●</i>支持跨级划拨</p>' +
                        '</div>' +
                        '</div>' +
                        '<div class="layui-layer-btn layui-layer-btn-r">' +
                        '<button class="btn-min layui-layer-btn0" type="button" onclick="top.closeBtn()"  id="closeBtn">取消</button>' +
                        '<button class="btn-min layui-layer-btn1" lay-submit="" id="submitBtn"  lay-filter="submitBtn">确定</button>' +
                        '</div>' +
                        '</form>',
                    success: function (layero, index) {
                        //弹窗初始化菜单
                        var setting = {
                            view: {
                                dblClickExpand: false,
                                selectedMulti: false,
                                showIcon: true,
                                filter: true,
                                fontCss: getFontCss
                            },
                            check: {chkStyle: "checkbox", enable: false},
                            data: {simpleData: {enable: true}},
                            callback: {
                                onClick: top.zTreeOnClick,
                                onCheck: top.zTreeOnClick
                            }
                        };
                        $(function () {
                            top.$("#qudaoSelectLayer").zTreeSelect(setting, zNodes);
                        });//初始化渠道菜单

                        //验证表单{icon:1,shift:6}
                        top.form.verify({
                            qudao: function (value) {
                                if (value == '') {
                                    return '请选择渠道';
                                }
                            }

                        });
                        //提交表单
                        top.form.on('submit(submitBtn)', function (data) {
                            top.success('操作成功');//成功提示
                            //top.failure('导入失败','网络异常，请检查网络，稍后重试');//错误提示
                            return false;
                        });
                    }
                })
            }

        });

        //批量划卡
        $('#pilianghuaka').click(function () {
            top.layer.open({
                type: 1,
                fix: false, //不固定
                maxmin: true,
                move: false,
                area: '500px',
                btnAlign: 'r',
                skin: 'layerOpen',
                shade: 0.2,
                title: '批量划卡',//弹窗标题
                content: '' +
                    '<form class="layui-form" action=""><div class="layerOpenCont"><div class="layerForm">' +
                    '<ul>' +
                    '<li>' +
                    '<div class="title">选择类型</div>' +
                    '<div class="inputCont">' +
                    '<span class="rowCont"><input type="radio" name="echartsSwitch" value="1" title="卡号" checked></span>' +
                    '<span class="rowCont"><input type="radio" name="echartsSwitch" value="2" title="ICCID"></span>' +
                    '</div>' +
                    '</li>' +
                    '<li><div class="title">起止号码</div>' +
                    '<div class="inputCont">' +
                    '<div class="inputRow"><input type="text" class="layui-input" placeholder="开始" autocomplete="off" lay-verify="qishi"></div>' +
                    '<em>-</em>' +
                    '<div class="inputRow"><input type="text" class="layui-input" placeholder="结束" autocomplete="off" lay-verify="jieshu"></div>' +
                    '</div>' +
                    '</li>' +
                    '<li>' +
                    '<div class="title">渠道</div>' +
                    '<div class="inputCont">' +
                    '<div class="zTreeSelect" style="width:100%;" zTreeSelect-search-field="name">' +
                    '<input type="hidden" id="qudaoInputLayer" class="zTreeSelect-hidden" value="" autocomplete="off"/>' +
                    '<input type="text" class="zTreeSelect-text" id="qudaoSelectLayer" zTreeSelect-text-field="name" autocomplete="off" placeholder="请选择" lay-verify="qudao">' +
                    '<span class="zTreeSelect-arrow arrow-down">&nbsp;</span>' +
                    '</div>' +
                    '</div>' +
                    '</li>' +
                    '</ul>' +
                    '<p><i>●</i>起止卡号或ICCID必须为连续号码</p>' +
                    '</div>' +
                    '</div>' +
                    '<div class="layui-layer-btn layui-layer-btn-r">' +
                    '<button class="btn-min layui-layer-btn0" type="button" onclick="top.closeBtn()">取消</button>' +
                    '<button class="btn-min layui-layer-btn1" lay-submit="" id="submitBtn"  lay-filter="submitBtn">确定</button>' +
                    '</div>' +
                    '</form>',
                success: function (layero, index) {
                    top.form.render();//弹窗后初始化表单样式
                    //弹窗初始化菜单
                    var setting = {
                        view: {
                            dblClickExpand: false,
                            selectedMulti: false,
                            showIcon: true,
                            filter: true,
                            fontCss: getFontCss
                        },
                        check: {chkStyle: "checkbox", enable: false},
                        data: {simpleData: {enable: true}},
                        callback: {
                            onClick: top.zTreeOnClick,
                            onCheck: top.zTreeOnClick
                        }
                    };
                    $(function () {
                        top.$("#qudaoSelectLayer").zTreeSelect(setting, zNodes);
                    });//初始化渠道菜单


                    //验证表单
                    top.form.verify({
                        qishi: function (value) {
                            if (value == '') {
                                return '请输入开始号码';
                            }

                        },
                        jieshu: function (value) {
                            if (value == '') {
                                return '请输入结束号码';
                            }
                        },
                        qudao: function (value) {
                            if (value == '') {
                                return '请选择渠道';
                            }
                        }

                    });
                    //提交表单
                    top.form.on('submit(submitBtn)', function (data) {
                        top.success('操作成功');//成功提示
                        //top.failure('导入失败','网络异常，请检查网络，稍后重试');//错误提示
                        return false;
                    });
                }
            })
        });

        //导入划卡
        $('#daoruhuaka').click(function () {
            top.layer.open({
                type: 1,
                fix: false, //不固定
                maxmin: true,
                move: false,
                area: '500px',
                btnAlign: 'r',
                skin: 'layerOpen',
                shade: 0.2,
                title: '导入划卡',//弹窗标题
                content: '' +
                    '<form class="layui-form" action=""><div class="layerOpenCont"><div class="layerForm">' +
                    '<ul>' +
                    '<li>' +
                    '<div class="title">选择文件</div>' +
                    '<div class="inputCont">' +
                    '<div class="input-file">' +
                    '<input type="text" class="fileinput"  name="file" placeholder="点击选择文件"  onfocus="this.blur()" lay-verify="daoru"/>' +
                    '<input type="file" class="fileSel" style="display: none" lay-verify="daoru"></div> ' +
                    '</div>' +
                    '<div class="contOther"><a href="/static/images/checkbox-disbaled.png" target="_blank">下载模板</a></div> ' +
                    '</li>' +
                    '<li>' +
                    '<div class="title">渠道</div>' +
                    '<div class="inputCont">' +
                    '<div class="zTreeSelect" style="width:100%;" zTreeSelect-search-field="name">' +
                    '<input type="hidden" id="qudaoInputLayer" class="zTreeSelect-hidden" value="" autocomplete="off"/>' +
                    '<input type="text" class="zTreeSelect-text" id="qudaoSelectLayer" zTreeSelect-text-field="name" autocomplete="off" placeholder="请选择" lay-verify="qudao">' +
                    '<span class="zTreeSelect-arrow arrow-down">&nbsp;</span>' +
                    '</div>' +
                    '</div>' +
                    '</li>' +
                    '</ul>' +
                    '<p><i>●</i>起止卡号或ICCID必须为连续号码</p>' +
                    '</div>' +
                    '</div>' +
                    '<div class="layui-layer-btn layui-layer-btn-r">' +
                    '<button class="btn-min layui-layer-btn0" type="button" onclick="top.closeBtn()">取消</button>' +
                    '<button class="btn-min layui-layer-btn1" lay-submit="" id="submitBtn"  lay-filter="submitBtn">确定</button>' +
                    '</div>' +
                    '</form>',
                success: function (layero, index) {
                    top.form.render();//弹窗后初始化表单样式
                    //弹窗初始化菜单
                    var setting = {
                        view: {
                            dblClickExpand: false,
                            selectedMulti: false,
                            showIcon: true,
                            filter: true,
                            fontCss: getFontCss
                        },
                        check: {chkStyle: "checkbox", enable: false},
                        data: {simpleData: {enable: true}},
                        callback: {
                            onClick: top.zTreeOnClick,
                            onCheck: top.zTreeOnClick
                        }
                    };
                    $(function () {
                        top.$("#qudaoSelectLayer").zTreeSelect(setting, zNodes);
                    });//初始化渠道菜单

                    //上传文件弹窗
                    top.$('.fileinput').click(function () {
                        top.$(".fileSel").trigger("click");
                    });
                    top.$('.fileSel').change(function () {
                        var fileUrl = $(this).val();
                        top.$('.fileinput').val(fileUrl)
                    });

                    //验证表单
                    top.form.verify({
                        daoru: function (value) {
                            if (value == '') {
                                return '请上传导入文件';
                            }

                        },
                        qudao: function (value) {
                            if (value == '') {
                                return '请选择渠道';
                            }
                        }

                    });
                    //提交表单
                    top.form.on('submit(submitBtn)', function (data) {
                        top.success('操作成功');//成功提示
                        //top.failure('导入失败','网络异常，请检查网络，稍后重试');//错误提示
                        return false;
                    });

                }
            })
        });

        //转沉默期
        $('#daizhuanjihuo').click(function () {
            var checkStatus = table.checkStatus('TableData'), data = checkStatus.data;
            if (data == 0) {
                layer.msg('请先选择数据，在进行操作！')
            } else {
                top.layer.open({
                    type: 1,
                    fix: false, //不固定
                    maxmin: true,
                    move: false,
                    area: '450px',
                    btnAlign: 'r',
                    skin: 'layerTips',
                    shade: 0.2,
                    title: false,
                    closeBtn: 0,
                    content: "" +
                        "<div class='layerOpenCont'>" +
                        "<div class='Layer-txt'>" +
                        "<h3>您确定操作待转激活吗？</h3>" +
                        "<p>说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明</p>" +
                        "</div>" +
                        "</div>",
                    btn: ['取消', '确定'],
                    btn2: function () {
                        top.success('操作成功');//成功提示
                        //top.failure('导入失败','网络异常，请检查网络，稍后重试');//错误提示
                        return false
                    }

                })
            }
        });

        //强制激活
        $('#qiangzhijihuo').click(function () {
            var checkStatus = table.checkStatus('TableData'), data = checkStatus.data;
            if (data == 0) {
                layer.msg('请先选择数据，在进行操作！')
            } else {
                top.layer.open({
                    type: 1,
                    fix: false, //不固定
                    maxmin: true,
                    move: false,
                    area: '450px',
                    btnAlign: 'r',
                    skin: 'layerTips',
                    shade: 0.2,
                    title: false,
                    closeBtn: 0,
                    content: "" +
                        "<div class='layerOpenCont'>" +
                        "<div class='Layer-txt'>" +
                        "<h3>您确定操作强制激活吗？</h3>" +
                        "<p>说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明</p>" +
                        "</div>" +
                        "</div>",
                    btn: ['取消', '确定'],
                    btn2: function () {
                        //top.success('操作成功');//成功提示
                        top.failure('操作强制激活失败', '网络异常，请检查网络，稍后重试');//错误提示
                        return false
                    }

                })
            }
        });

        //停机
        $('#tingji').click(function () {
            var checkStatus = table.checkStatus('TableData'), data = checkStatus.data;
            if (data == 0) {
                layer.msg('请先选择数据，在进行操作！')
            } else {
                top.layer.open({
                    type: 1,
                    fix: false, //不固定
                    maxmin: true,
                    move: false,
                    area: '450px',
                    btnAlign: 'r',
                    skin: 'layerTips',
                    shade: 0.2,
                    title: false,
                    closeBtn: 0,
                    content: "" +
                        "<div class='layerOpenCont'>" +
                        "<div class='Layer-txt'>" +
                        "<h3>您确定操作停机吗？</h3>" +
                        "<p>说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明</p>" +
                        "</div>" +
                        "</div>",
                    btn: ['取消', '确定'],
                    btn2: function () {
                        top.success('操作成功');//成功提示
                        //top.failure('操作停机失败','网络异常，请检查网络，稍后重试');//错误提示
                        return false
                    }

                })
            }
        });
        //复机
        $('#fuji').click(function () {
            var checkStatus = table.checkStatus('TableData'), data = checkStatus.data;
            if (data == 0) {
                layer.msg('请先选择数据，在进行操作！')
            } else {
                top.layer.open({
                    type: 1,
                    fix: false, //不固定
                    maxmin: true,
                    move: false,
                    area: '450px',
                    btnAlign: 'r',
                    skin: 'layerTips',
                    shade: 0.2,
                    title: false,
                    closeBtn: 0,
                    content: "" +
                        "<div class='layerOpenCont'>" +
                        "<div class='Layer-txt'>" +
                        "<h3>您确定操作复机吗？</h3>" +
                        "<p class='red'>说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明</p>" +
                        "</div>" +
                        "</div>",
                    btn: ['取消', '确定'],
                    btn2: function () {
                        top.success('操作成功');//成功提示
                        return false
                    }

                })
            }
        });

        //数据关闭
        $('#guanbi').click(function () {
            var checkStatus = table.checkStatus('TableData'), data = checkStatus.data;
            if (data == 0) {
                layer.msg('请先选择数据，在进行操作！')
            } else {
                top.layer.open({
                    type: 1,
                    fix: false, //不固定
                    maxmin: true,
                    move: false,
                    area: '450px',
                    btnAlign: 'r',
                    skin: 'layerTips',
                    shade: 0.2,
                    title: false,
                    closeBtn: 0,
                    content: "" +
                        "<div class='layerOpenCont'>" +
                        "<div class='Layer-txt'>" +
                        "<h3>您确定关闭数据服务吗？</h3>" +
                        "<p>说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明</p>" +
                        "</div>" +
                        "</div>",
                    btn: ['取消', '确定'],
                    btn2: function () {
                        top.success('闭数据服务成功');//成功提示
                        return false
                    }

                })
            }
        });
        //数据恢复
        $('#huifu').click(function () {
            var checkStatus = table.checkStatus('TableData'), data = checkStatus.data;
            if (data == 0) {
                layer.msg('请先选择数据，在进行操作！')
            } else {
                top.layer.open({
                    type: 1,
                    fix: false, //不固定
                    maxmin: true,
                    move: false,
                    area: '450px',
                    btnAlign: 'r',
                    skin: 'layerTips',
                    shade: 0.2,
                    title: false,
                    closeBtn: 0,
                    content: "" +
                        "<div class='layerOpenCont'>" +
                        "<div class='Layer-txt'>" +
                        "<h3>您确定恢复数据服务吗？</h3>" +
                        "<p>说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明</p>" +
                        "</div>" +
                        "</div>",
                    btn: ['取消', '确定'],
                    btn2: function () {
                        top.success('恢复数据服务成功');//成功提示
                        return false
                    }

                })
            }
        });

        //导出
        $('#daochu').click(function () {
            top.layer.open({
                type: 1,
                fix: false, //不固定
                maxmin: true,
                move: false,
                area: '450px',
                btnAlign: 'r',
                skin: 'layerTips',
                shade: 0.2,
                title: false,
                closeBtn: 0,
                content: "" +
                    "<div class='layerOpenCont'>" +
                    "<div class='Layer-txt'>" +
                    "<h3>您确定要导出数据吗？</h3>" +
                    "<p>因导出的数据量过大导致运行缓慢，请耐心等待</p>" +
                    "</div>" +
                    "</div>",
                btn: ['取消', '确定'],
                btn2: function () {
                    top.successBtn('导出成功', '您导出的文件太大，已生成下载任务，请稍后在下载列表里下载导出文件')//成功提示
                    return false
                }

            })

        })
    })
</script>

</body>
</html>
